<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="undebounce" autofocus placeholder="输入搜索内容">
    <button id="btn">btn</button>
    <button id="cancel">取消搜索时间绑定</button>
    <script>
        window.onload = function() {
            const input = document.querySelector('#undebounce');
            const cancel = document.querySelector('#canael');
            const btn = document.querySelector('btn');
            btn.addEventListener('click', function() {
                console.log('one');
            });
            btn.addEventListener('click', function() {
                console.log('two');
            });
            btn.addEventListener('click', function() {
                console.log('three');
            });

            function doInput(event) {
                let keyword = event.target.value;
                // 能封装就封装 解耦 
                // 如果流程性代码超过10行， 一定封装
                // 搜索比较复杂 封装能力 
                // 应该放到外面， 
                // console.log('准备实时搜索' + content); 
                ajax(keyword)
                    // console.log(event);
            }

            function ajax(content) {
                console.log('准备实时搜索' + content);
            }
            input.addEventListener('input', function(event) {
                // let keyword = this.value;
                let keyword = event.target.value;
                ajax(keyword);
                // console.log(keyword);

            });
            input.addEventListener('keydown', function(event) {

                if (event.keyCode == 13) {
                    console.log('搜索吧');
                }
            });
            cancel.addEventListener('click', function() {
                input.removeEventListener('input', doInput);
            })
        }
    </script>
</body>

</html>